<template>
	<view class="tar-panel">
		<view class="header">
			<text class="title">订单号：{{order.order_sn}}</text>
			<text class="sub-title" :class="stateClass">
				{{stateText}}
			</text>
		</view>
		<view class="main">
			<order-item-card v-for="(it, i) in order.items" :key="i"></order-item-card>
		</view>
		<view class="footer">
			<view class="total"> 实付： <tar-money :value="order.total"></tar-money></view>
			<view class="opt">
				<fui-button width="5rem" height="1.5rem" radius="1rem" size="20" background="#f5f5f5"
					color="#666">申请售后</fui-button>
				<fui-button type="danger" width="5rem" height="1.5rem" radius="1rem" size="20">评价</fui-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		computed: {
			stateClass() {
				return ['ready', 'paying', 'sending', 'receiving', 'finish'][this.order.state]
			},
			stateText() {
				return ['未知', '待支付', '配送中', '等待收货', '已完成'][this.order.state]
			}
		},
		props: {
			order: {
				type: Object
			},
		}
	}
</script>
<style lang="scss" scoped>
	.tar-panel {
		background: #fff;
		margin-bottom: 20rpx;

		.header {
			display: flex;
			height: 2.5rem;
			align-items: center;
			padding: 0 .5rem;

			.title {
				flex: 1;
				color: #666;
				font-size: 28rpx;
			}

			.sub-title {
				font-size: .8rem;
				color: #999;

				&.paying {
					color: #c00;
				}

				;
			}
		}

		.footer {
			padding: 0 1rem .8rem 1rem;

			.total {
				display: flex;
				justify-content: flex-end;
			}

			.opt {
				margin-top: .5rem;
				display: flex;
				justify-content: flex-end;
				gap: .5rem;
			}
		}
	}
</style>